<template>
  <!-- 消防信息 -->
  <div>
    <public-modal
      :footer="false"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      modalStyle="detailModal"
      title="人防信息"
      width="880px"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title" style="padding-top: 0">
          <div class="icon"></div>
          <div class="content">法人信息</div>
        </div>

        <table>
          <tr>
            <td class="td-label">姓名</td>
            <td class="td-value">{{ company_duty_person_detail.dutyPersonName }}</td>
            <td class="td-label">联系方式</td>
            <td class="td-value">{{ company_duty_person_detail.mobile }}</td>
          </tr>
          <tr>
            <td class="td-label">身份证号</td>
            <td class="td-value">{{ company_duty_person_detail.idCard }}</td>
            <td class="td-label">证件照片</td>
            <td class="td-value click-style">
              <span @click="werImg(company_duty_person_detail.personImage)">查看</span>
              <img
                :id="company_duty_person_detail.personImage"
                :data-original="imgPrefix + company_duty_person_detail.personImage"
                :src="imgPrefix + company_duty_person_detail.personImage"
              />
            </td>
          </tr>
          <tr>
            <td class="td-label">户籍地址</td>
            <td class="td-value" colspan="3">{{ company_duty_person_detail.residenceDetail }}</td>
          </tr>
        </table>

        <div v-if="hotel_work_person_list.length > 0" class="common-title" style="padding-top: 0">
          <div class="icon"></div>
          <div class="content">保安信息</div>
        </div>

        <table v-if="hotel_work_person_list.length > 0">
          <tr>
            <td class="thead-td" style="width: 1rem">姓名</td>
            <td class="thead-td" style="width: 1rem">头像</td>
            <td class="thead-td" style="width: 1rem">联系方式</td>
            <td class="thead-td" style="width: 1.3rem">入职时间</td>
            <td class="thead-td" style="width: 3rem">现居地址</td>
            <td class="thead-td" style="width: 1rem">证件照片</td>
          </tr>
          <tr v-for="(item, index) in hotel_work_person_list" :key="index">
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">{{ item.personName }}</td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">
              <span class="click-style" @click="werImg(item.personImage)">查看</span>
              <img
                :id="item.personImage"
                :data-original="imgPrefix + item.personImage"
                :src="imgPrefix + item.personImage"
              />
            </td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">{{ item.mobile }}</td>
            <td class="td-value" style="width: 1.3rem; text-align: center; padding-left: 0">
              {{ item.entryTime ? item.entryTime.split(' ')[0] : '' }}
            </td>
            <td class="td-value" style="width: 3rem; text-align: center; padding-left: 0">{{ item.currentAddress }}</td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">
              <span class="click-style" @click="werImg(item.idCardUrl)">查看</span>
              <img :id="item.idCardUrl" :data-original="imgPrefix + item.idCardUrl" :src="imgPrefix + item.idCardUrl" />
            </td>
          </tr>
        </table>

        <div v-if="joint_defence_person_list.length > 0" class="common-title">
          <div class="icon"></div>
          <div class="content">联防队员</div>
        </div>

        <table v-if="joint_defence_person_list.length > 0">
          <tr>
            <td class="thead-td" style="width: 1rem">姓名</td>
            <td class="thead-td" style="width: 1rem">头像</td>
            <td class="thead-td" style="width: 1rem">联系方式</td>
            <td class="thead-td" style="width: 1.3rem">入职时间</td>
            <td class="thead-td" style="width: 3rem">现居地址</td>
            <td class="thead-td" style="width: 1rem">详情</td>
          </tr>
          <tr v-for="(item, index) in joint_defence_person_list" :key="index">
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">{{ item.personName }}</td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">
              <span class="click-style" @click="werImg(item.personImage)">查看</span>
              <img
                :id="item.personImage"
                :data-original="imgPrefix + item.personImage"
                :src="imgPrefix + item.personImage"
              />
            </td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">{{ item.mobile }}</td>
            <td class="td-value" style="width: 1.3rem; text-align: center; padding-left: 0">
              {{ item.employmentTime ? item.employmentTime.split(' ')[0] : '' }}
            </td>
            <td class="td-value" style="width: 3rem; text-align: center; padding-left: 0">{{ item.speciality }}</td>
            <td class="td-value" style="width: 1rem; text-align: center; padding-left: 0">
              <span class="click-style" @click="show_defence_person_detail(item)">查看</span>
            </td>
          </tr>
        </table>
      </div>

      <div slot="footer"></div>
    </public-modal>

    <defence-detail ref="defenceDetail"></defence-detail>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
import { findEnableDictItemsbyCode } from '@/api/api'
import defenceDetail from './defence_person_detail.vue'
export default {
  name: 'detailModal',
  components: { publicModal, defenceDetail },
  data() {
    return {
      imgPrefix: '',
      publicVisible: false,

      company_duty_person_detail: {},
      joint_defence_person_list: [],
      hotel_work_person_list: [],
    }
  },

  methods: {
    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        zIndex: '9999',
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    show(records) {
      this.get_dict()
      this.get_company_duty_person_detail(records.companyId)
      this.get_joint_defence_person_list(records.companyId)
      this.get_work_person_list(records.companyId)
      this.publicVisible = true
    },

    async get_dict() {
      let res = await findEnableDictItemsbyCode({ code: 'static_server' })
      this.imgPrefix = res.result[0].value
    },

    async get_company_duty_person_detail(companyId) {
      let { result } = await getAction('/company/duty_person/detail', { companyId })
      this.company_duty_person_detail = result
    },

    async get_joint_defence_person_list(companyId) {
      let { result } = await getAction('/company/joint_defence_person/page', { companyId, pageSize: 99999 })
      this.joint_defence_person_list = result.records
    },

    async get_work_person_list(companyId) {
      let { result } = await getAction('/hotel/work_person/page', { companyId, position: 7, pageSize: 99999 })
      this.hotel_work_person_list = result.records
    },

    show_defence_person_detail(item) {
      this.$refs.defenceDetail.show(item)
    },

    cancel(target) {
      this.publicVisible = false
    },
  },
}
</script>

<style lang="less" scoped>
table {
  font-family: PingFang SC-Medium, PingFang SC;
  border-collapse: collapse;
  font-weight: 500;
  margin-top: 0.12rem;
  margin-bottom: 0.22rem;
}

tr {
  width: 100%;
  height: 0.46rem;
  font-size: 0.14rem;
}

.td-label {
  background: var(--theme-modal-label-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-tab-text-color);
  width: 1.6rem;
  text-align: center;
}

.td-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 0.25rem;
  width: 2.52rem;
  max-width: 2.52rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.thead-td {
  background: #0c4681 !important;
  border: 1px solid #14589e !important;
  font-size: 14px;
  font-weight: 500;
  color: #1388ff !important;
  text-align: center;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}
</style>

<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

img {
  display: none;
}
</style>
